<template>
    <div class="dayin">
      <el-button type="primary" @click="print()" class="dayin_btn">打印预览</el-button>
      <div ref="print" id="printArea">
        <div v-for="(item, index) in dayinlist" :key="index">
  
          <!-- <div class="hr"></div> -->
          <!-- <div  v-for="(ite,ind) in item.num" :key="ind"> -->
          <p class="title center_text" style="font-size: 22px;">{{ item.biaoqian_name ? item.biaoqian_name : Infomation
          }}生产通知单
          </p>
          <!-- <hr style="line-height: 2px;margin:3px;"> -->
          <table style="border-collapse: collapse;margin-top:15px;" cellspacing="0">
            <tr>
              <td align="left" style="text-align: left;">
                <div><b>[日期]：</b> <span>{{formatterTime(item.order_date)}}</span></div>
              </td>
              <td align="left" style="text-align: left;">
                <div><b>[订单号]：</b><span>{{ item.order_number }}</span></div>
              </td>
                  <td align="left" style="text-align: left;">
                <div><b>[客户]：</b><span>{{ item.customer.customer_name }}</span></div>
              </td>
              <td rowspan="4" align="right" valign="top" width="150">
                <vue-qr :logoSrc="imageUrl" :text='"{\"order_id\":" + item.id + "}"' margin="3"
                  :size="90"></vue-qr>
                <!-- <span class="gr_see">扫码完成工序</span> -->
              </td>
            </tr>
            <tr>
              <td align="left" style="text-align: left;">
                <div><b>[交货日期]：</b> <span>{{formatterTime(item.delivery_date)}}</span></div>
              </td>
              <td align="left" style="text-align: left;">
                <div> <b>[产品]：</b><span>{{ item.product.product_name }}</span></div>
              </td>
              <td align="left" style="text-align: left;">
                <div> <b>[型号]：</b><span>{{ item.model_number.model_number }}</span></div>
              </td>
  
            </tr>
            <tr>
              <td align="left" style="text-align: left;">
                <div> <b>[规格]：</b><span>{{ item.specification ? item.specification.specification : '' }}</span></div>
              </td>
  
              <td align="left" style="text-align: left;">
                <div><b>[件数]：</b> <span>{{ item.models_field.cases_num }}</span></div>
              </td>
              <td align="left" style="text-align: left;">
                <div> <b>[尺寸]：</b> <span>{{ item.models_field.size }}</span></div>
              </td>
            </tr>
            <tr>
              <td align="left" style="text-align: left;">
                <div> <b>[颜色]：</b> <span>{{ item.color ? item.color.color : '' }}</span></div>
              </td>
              <td align="left" style="text-align: left;">
                <div> <b>[方向]：</b> <span>{{ item.direction }}</span></div>
              </td>
              <td align="left" style="text-align: left;">
                <div> <b>[紧急程度]：</b> 
                  <span v-if="item.emergency_procedure == 1" style="color: #000">普通</span>
                  <span v-if="item.emergency_procedure == 2" style="color: #000; font-weight: bold">紧急</span>
                  <span v-if="item.emergency_procedure == 3" style="color: #000; font-weight: bold">十万火急</span>
                </div>
              </td>
            </tr>
            <tr>
              <td align="left" colspan="5" style="text-align: left;">
                <div> <b>[备注]：</b> <span>{{ item.remark }}</span>
                </div>
              </td>
            </tr>
            <!-- <tr v-if="item.model_number.file.file_url">
              <td align="left" colspan="5" style="text-align: left;">
                <div class="img_order">
                  <img :src="uploadImgUrl+item.model_number.file.file_url">
                </div>
              </td>
            </tr> -->
          </table>
          <!-- <div class="img_order">
            <img :src="uploadImgUrl+item.model_number.file.file_url">
          </div> -->
          <div style="page-break-after: always" v-if="(index+1)%3==0"></div>
        </div>
        <!-- </div> -->
      </div>
    </div>
  </template>
  
  <script>
  import vueQr from "vue-qr";
  export default {
    components: {
      vueQr,
    },
    data() {
      return {
        uploadImgUrl: this.$global.imgQianJui,
        dayinlist: [],
        imageUrl: "",
        strDate: "",
        erweitext: "",
        isprint: true,
        Infomation: ''
      };
    },
    mounted() {
      this.dayinlist = JSON.parse(this.$route.query.data);
      console.log(this.dayinlist)
      this.Infomation = this.$store.getters.Infomation.company_name
      this.currentTime();
    },
    methods: {
      formatterTime(data) {
        return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
      },
      print() {
        // this.isprint = false
        this.$print(this.$refs.print);
      },
      /**
       * 获取当前时间
       */
      currentTime() {
        var date = new Date();
        var year = date.getFullYear(); //月份从0~11，所以加一
        let month = date.getMonth();
        console.log("month", month);
        var dateArr = [
          date.getMonth() + 1,
          date.getDate(),
          date.getHours(),
          date.getMinutes(),
          date.getSeconds(),
        ];
        //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
        for (var i = 0; i < dateArr.length; i++) {
          if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = "0" + dateArr[i];
          }
        }
        this.strDate =
          year +
          "-" +
          dateArr[0] +
          "-" +
          dateArr[1]
        //  +
        // " " +
        // dateArr[2] +
        // ":" +
        // dateArr[3] +
        // ":" +
        // dateArr[4];
      },
    },
  };
  </script>
  <style scoped>
  .dayin {
    margin: 0 auto;
    /* max-width:500px; */
    box-sizing: border-box;
  }
  
  #printArea {
    width: 195mm;
    /* height:80mm; */
    padding: 10px 20px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  #printArea>div {
    margin-top: 50px;
  }
  
  #printArea>div:first-child {
    margin-top: 0px;
  }
  
  #printArea table {
    width: 100%;
    border-collapse: collapse;
  }
  
  #printArea table td {
    /* height:20px; */
    /* line-height:20px; */
    /* font-size: 35px; */
  }
  
  #printArea table {
    /* border: 1px solid #c5c5c5; */
  }
  
  #printArea table td,
  table th {
    border: 1px solid #000;
    text-align: center;
    padding:3px;
    margin: 0;
    font-size: 14px;
  }
  
  #printArea table td div {
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  #printArea table tr {
    /* display:inline-block; */
    /* line-height: 18px; */
  }
  
  #printArea table thead th {
    background-color: #0a8fa1;
  }
  
  #printArea table tr th,
  table tr td {
    padding:3px 0;
  }
  
  @page {
    size: auto;
    /* auto is the initial value */
    margin: 3mm;
    /* this affects the margin in the printer settings */
  }
  
  .procedure {
    word-wrap: break-word;
  }
  .dayin_btn {
    background: #0a8fa1;
    border: none;
    display: block;
    margin: 20px auto;
  }
  
  .hr {
    width: 100%;
    height: 2px;
    background: #000;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  
  .title {
    font-size: 22px;
    color: #000;
    text-align: center;
    margin: 0;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-top: 5px;
  }
  
  .box .left .el-row {
    margin-top: 10px;
  }
  
  .box .left .el-row .el-col {
    text-align: left;
    color: #333;
    font-weight: bold;
  }
  
  .center_text {
    text-align: center !important;
    font-size: 22px;
  }
  
  .gr_see {
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
  
  }
  
  span {
    font-size:16px;
    font-weight:500;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  b {
    min-width:15mm;
    font-weight:500;
    font-size: 16px;
  }
  .img_order{
    width: 100%;
    margin-top: 10px;
  
  }
  .img_order img{
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  @media print {
  .dayin {
    margin: 0 auto;
    /* max-width:500px; */
    box-sizing: border-box;
  }
  
  #printArea {
    width: 195mm;
    /* height:80mm; */
    padding: 10px 20px;
    box-sizing: border-box;
    margin: 0 auto;
  }
  
  #printArea>div {
    margin-top: 50px;
  }
  
  #printArea>div:first-child {
    margin-top: 0px;
  }
  
  #printArea table {
    width: 100%;
    border-collapse: collapse;
  }
  
  #printArea table td {
    /* height:20px; */
    /* line-height:20px; */
    /* font-size: 35px; */
  }
  
  #printArea table {
    /* border: 1px solid #c5c5c5; */
  }
  
  #printArea table td,
  table th {
    border: 1px solid #000;
    text-align: center;
    padding:3px;
    margin: 0;
    font-size: 14px;
  }
  
  #printArea table td div {
    width: 100%;
    display: flex;
    align-items: center;
  }
  
  #printArea table tr {
    /* display:inline-block; */
    /* line-height: 18px; */
  }
  
  #printArea table thead th {
    background-color: #0a8fa1;
  }
  
  #printArea table tr th,
  table tr td {
    padding:3px 0;
  }
  
  @page {
    size: auto;
    /* auto is the initial value */
    margin: 3mm;
    /* this affects the margin in the printer settings */
  }
  
  .procedure {
    word-wrap: break-word;
  }
  .dayin_btn {
    background: #0a8fa1;
    border: none;
    display: block;
    margin: 20px auto;
  }
  
  .hr {
    width: 100%;
    height: 2px;
    background: #000;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  
  .title {
    font-size: 22px;
    color: #000;
    text-align: center;
    margin: 0;
    font-weight: bold;
    display: block;
    text-align: center;
    margin-top: 5px;
  }
  
  .box .left .el-row {
    margin-top: 10px;
  }
  
  .box .left .el-row .el-col {
    text-align: left;
    color: #333;
    font-weight: bold;
  }
  
  .center_text {
    text-align: center !important;
    font-size: 22px;
  }
  
  .gr_see {
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
  
  }
  
  span {
    font-size:16px;
    font-weight:500;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  b {
    min-width:15mm;
    font-weight:500;
    font-size: 16px;
  }
  .img_order{
    width: 100%;
    margin-top: 10px;
  
  }
  .img_order img{
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  
  }
  
  @page {
    margin: 0.3cm;
  }</style>
  